<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add Employee</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="css/main-cs.css">
</head>

<body>
<!-- Modal Contract-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Add Contract for ${Employee.firstName }</h4>
      </div>
      <div class="modal-body">
	    <div class="row">
         <div id="run" class="progress progress-striped active form-group" style="display:none">
		   	<div class="progress-bar progress-bar-success" role="progressbar"  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">Please waiting...</div>
		</div>
		<div class="form-group col-md-12">
	      	<button type="button" class="btn btn-primary" id="btn-saveContract">Save</button>
		    <button type="button" class="btn btn-primary" id="btn-addMoreContract">Add more</button>
		</div>
        <div class="form-group col-md-12">
	            <label for="recipient-name" class="control-label" style="color:#F00; display:none" id="lblMesage"><b></b></label>
	     </div>
         <div class="form-group col-md-12">
	            <label>Contract Type</label>
                <select id="contractType" class="form-control">
                	<option value="0">--Select Contract Type--</option>
                    <option value="Short-term">Short-term Contracts</option>
                    <option value="Long-term">Long-term Contracts</option>
                </select>
	      </div>
          <div class="form-group col-md-6">
	            <label>ContractID</label>
                <input type="text" class="form-control" id="contractID"/>
	      </div>
	      <div class="form-group col-md-6">
	            <label>Contract Name</label>
                <input type="text" class="form-control" id="contractName"/>
	      </div>
          <div class="form-group col-md-6">
	            <label>Register Date</label>
               	<input type="date" id="RegDate" class="form-control"/>
	       </div>
           <div class="form-group col-md-6">
	            <label>Start Date</label>
               	<input type="date" id="StartDate" class="form-control"/>
	       </div>
           <div class="form-group col-md-6">
	            <label>End Date</label>
               	<input type="date" id="EndDate" class="form-control"/>
	        </div>
            <div class="form-group col-md-6">
	            <label>Salary</label>
               	<input type="text" id="Salary" class="form-control"/>
	        </div>
	    </div>
      </div>
    </div>
  </div>
</div>
<!-- Modal Insurance-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Add Insurance for ${Employee.firstName }</h4>
      </div>
      <div class="modal-body">
      		<div class="row">
             <div id="run1" class="progress progress-striped active form-group" style="display: none;">
		   		<div class="progress-bar progress-bar-success" role="progressbar"  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">Please waiting...</div>
			</div>
      		<div class="form-group col-md-12">
      			<button type="button" class="btn btn-primary" id="btn-saveInsurance">Save</button>
        		<button type="button" class="btn btn-primary" id="btn-addMoreInsurance">Add more</button>
      		</div>
            <div class="form-group col-md-12">
                   <label for="recipient-name" class="control-label" style="color:#F00; display:none" id="lblMesage1"><b></b></label>
            </div>
            <div class="form-group col-md-6">
                    <label>Insurance Type</label>
                    <select id="insuranceType" class="form-control">
                        <option value="0">--Select Insurance Type--</option>
                        <option value="Health">Health Insurance</option>
                        <option value="Accident">Accident Insurance</option>
                    </select>
            </div>
           <div class="form-group col-md-6">
                    <label>InsuranceID</label>
                    <input type="text" class="form-control" id="insuranceID"/>
            </div>
            <div class="form-group col-md-6">
                    <label>Pay Form</label>
                    <select id="payForm" class="form-control">
                        <option value="0">--Select Pay Form--</option>
                        <option value="Deduction">Deduction from salary</option>
                        <option value="Company">Company pay</option>
                    </select>
               </div>
               <div class="form-group col-md-6">
                    <label>Register Date</label>
                    <input type="date" id="insuranceRegDate" class="form-control"/>
              </div>
               <div class="form-group col-md-6">
                    <label>Money/Month</label>
                    <input type="text" id="money" class="form-control"/>
                  </div>
              <div class="form-group col-md-6">
                    <label>Register Place</label>
                    <textarea id="regPlace" class="form-control"></textarea>
             </div>
           </div>
      </div>
    </div>
  </div>
</div>
<!--Content--->
<%@ include file="_header.jsp" %>
<div id="main">
	<ol class="breadcrumb">
  		<li><a class="management" style="cursor: pointer;">Home</a></li>
  		<li><a class="management" style="cursor: pointer;">Manage Employee</a></li>
  		<li class="active">Add Employee</li>
	</ol>
    <div id="panel1">
    	<div class="panel panel-primary">
        	<div class="panel-heading">
            	<p style="color:#FFF; font-weight:bold; font-size:20px">Add Employee</p>
            </div>
            <div class="panel-body">
            		<h1 style="text-align:center">Add Employee Successfull</h1>
                    <h2 style="text-align:center">You can add contract or add insurance for employee ${Employee.firstName } ${Employee.lastName }</h2>
                    <div class="col-md-6 col-md-offset-3">
                        <button class="btn btn-info" type="button" id="addContract" style="margin-left: 5px">Add Contract</button>
                        <button class="btn btn-info" type="button" id="addInsurance" style="margin-left: 5px">Add Insurance</button>
                        <button class="btn btn-info" type="button" id="new" style="margin-left: 5px">New Employee</button>
                        <button class="btn btn-info" type="button" id="cancel" style="margin-left: 5px">Cancel</button>
                    </div>
                    <input type="hidden" id="hiddenEmployeeID" value="${Employee.employeeID}"/>
    	 </div><!-- end panel-body-->
        </div><!-- end panel primary-->
    </div><!-- end panel1-->
</div><!-- end main-->
<%@include file="_footer.jsp" %>
</body>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootbox.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
	var flagCheck = false;
	
	$("#addContract").click(function(){
		$("#myModal").modal('show');
	});
	
	$("#addInsurance").click(function(){
		$("#myModal1").modal('show');
	});
	
	$("#new").click(function(){
		window.location.replace("AddEmployeeController.do");
	});
	
	$("#btn-saveContract").click(function(){
		if(validateDataContract()){
			$("#run").css("display", "");
				$.ajax({
					url:"AddEmployeeController.do?action=saveContract"
							+"&employeeID="+$("#hiddenEmployeeID").val()
							+"&contractID="+$("#contractID").val()
							+"&contractName="+$("#contractName").val()
							+"&contractType="+$("#contractType option:selected").val()
							+"&regDate="+$("#RegDate").val()
							+"&startDate="+$("#StartDate").val()
							+"&endDate="+$("#EndDate").val()
							+"&salary="+$("#Salary").val(),
					type:"POST",
					success:function(data){
						$("#run").css("display", "none");
						$("#lblMesage").css("display", "");
						$("#lblMesage").css("color", "green");
						$("#lblMesage").text(data);
					},
					error:function(data){
						
					}
				});
		}
	});
	
	$("#btn-saveInsurance").click(function(){
		if(validateDataInsurance()){
			$("#run1").css("display", "");
				$.ajax({
					url:"AddEmployeeController.do?action=saveInsurance"
							+"&employeeID="+$("#hiddenEmployeeID").val()
							+"&insuracneID="+$("#insuranceID").val()
							+"&insuranceType="+$("#insuranceType option:selected").val()
							+"&insuranceRegDate="+$("#insuranceRegDate").val()
							+"&insuranceRegPlace="+$("#regPlace").val()
							+"&money="+$("#money").val()
							+"&payForm="+$("#payForm option:selected").val(),
					type:"POST",
					success:function(data){
						$("#run1").css("display", "none");
						$("#lblMesage1").css("display", "");
						$("#lblMesage1").css("color", "green");
						$("#lblMesage1").text(data);
					},
					error:function(data){
						
					}
				});
		}
	});
	
	function validateDataContract(){
		var flag = true;
		
		if($("#contractType option:selected").val() == 0){
			$("#contractType").css("border-color","red");
			flag = false;
		}
		else{
			$("#contractType").css("border-color","");
		}
		
		if($("#contractID").val().trim() == ''){
			$("#contractID").css("border-color","red");
			flag = false;
		}else{
			$("#contractID").css("border-coler","");
		}
		
		if($("#RegDate").val().trim() == ''){
			$("#RegDate").css("border-color","red");
			flag = false;
		}else{
			$("#RegDate").css("border-color","");
		}
		
		if($("#StartDate").val().trim() == ''){
			$("#StartDate").css("border-color","red");
			flag = false;
		}else{
			$("#StartDate").css("border-coler","");
		}
		
		if($("#EndDate").val().trim() == ''){
			$("#EndDate").css("border-color","red");
			flag = false;
		}else{
			$("#EndDate").css("border-color","");
		}
		
		if($("#Salary").val().trim() == '' || !isNumeric($("#Salary").val().trim())){
			$("#Salary").css("border-color","red");
			flag = false;
		}else{
			$("#Salary").css("border-color","");
		}
		if(!flag){
			$("#lblMesage").css("display", "");
			$("#lblMesage").text("Please check data entered");
		}else{
			$("#lblMesage").css("display", "none");
			$("#lblMesage").text("");
		}
		return flag;
	}
	
	function validateDataInsurance(){
		var flag = true;
		
		if($("#insuranceType option:selected").val() == 0){
			$("#insuranceType").css("border-color","red");
			flag = false;
		}
		else{
			$("#insuranceType").css("border-color","");
		}
		
		if($("#insuranceID").val().trim() == ''){
			$("#insuranceID").css("border-color","red");
			flag = false;
		}else{
			$("#insuranceID").css("border-color","");
		}
		
		if($("#insuranceRegDate").val().trim() == ''){
			$("#insuranceRegDate").css("border-color","red");
			flag = false;
		}else{
			$("#insuranceRegDate").css("border-color","");
		}
		
		if($("#payForm option:selected").val().trim() == ''){
			$("#payForm").css("border-color","red");
			flag = false;
		}else{
			$("#payForm").css("border-color","");
		}
		
		if(!flag){
			$("#lblMesage1").css("display", "");
			$("#lblMesage1").text("Please check data entered");
		}else{
			$("#lblMesage1").css("display", "none");
			$("#lblMesage1").text("");
		}
		return flag;
	}
	
	function isNumeric(number){
	    var re = /^-{0,1}\d*\.{0,1}\d+$/;
	    return re.test(number);
	}
	
	$("#btn-addMoreInsurance").click(function(){
		$("#lblMesage1").css("display", "none");
		$("#lblMesage1").text("");
		$("#insuranceType").val("0");
		$("#insuranceID").val("");
		$("#insuranceRegDate").val("");
		$("#regPlace").val("");
		$("#money").val("");
		$("#payForm").val("0");
	});
	
	$("#btn-addMoreContract").click(function(){
		$("#lblMesage").css("display", "none");
		$("#lblMesage").text("");
		$("#contractType").val("0");
		$("#contractID").val("");
		$("#contractName").val("");
		$("#RegDate").val("");
		$("#StartDate").val("");
		$("#EndDate").val("");
		$("#Salary").val("");
	});
	
	$("#cancel").click(function(){
		window.location.replace("EmployeeController.do");
	});
	
	$(".management").click(function(){
		window.location.replace("EmployeeController.do");
	});
	
	$("#signout").click(function(){
		$.ajax({
			url:"LoginController?action=false",
			type:"POST",
			success:function(){
				window.location.replace("LoginController");
			}
		});
	});
</script>
</html>
